import React from 'react'
import { Row, Col } from 'antd';
import '@/assets/scss/ych//One/AddMoney.scss'
import MyInput from '@/components/ych/AddMoney/PublicApi/MyInput'
import TextTitle from '@/components/ych/AddMoney/PublicApi/TextTitle'
import MySelect from '@/components/ych/AddMoney/PublicApi/MySelect'
import MyButton from '@/components/ych/AddMoney/PublicApi/MyButton'
import MyRadio from './PublicApi/MyRadio';

const inputWidth = '100%'  // 输入框的宽度
const btnColor = "#336699" // 选择按钮的背景颜色
const btnWidth = '80px' // 选择按钮的宽度

export default function OneFirst() {
    
    return (  // 下面的每一个代表每一行
        <>
            <ThisOne />
            <ThisTwo />
            <ThisThree />
            <ThisFour />
            <ThisFive />
            <ThisSix />
            <ThisSeven />
        </>
    )
}

const ThisOne = (props) => {
    const oneList = ["一级", "二级", "三级"]  // 风险等级下拉选择框
    return (
        <Row gutter={0} className="row">
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="标名" important="*" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MyInput placeholder="请输入名称" inputWidth={inputWidth} />
            </Col>
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="风险等级" important="*" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MySelect defaultValue="请选择" List={oneList} inputWidth={inputWidth} />
            </Col>
        </Row>
    )
}
const ThisTwo = (props) => {
    return (
        <Row gutter={0} className="row">
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="借款方" important="*" />
            </Col>
            <Col className="gutter-row, col-flex" span={7}>
                <MyInput value="请点击按钮选择借款账号" disabled={true} inputWidth='70%' fontSize='14px' />
                <MyButton btnColor={btnColor} btnWidth={btnWidth} btntitle="选择"/>
            </Col>
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="借款总金额" important="*" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MyInput placeholder="请输入500-5000000的整数" inputWidth={inputWidth} />
            </Col>
        </Row>
    )
}
const ThisThree = (props) => {
    const twoList = ["一次性还款", "分期还款"]
    return (
        <Row gutter={0} className="row">
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="年利率" important="*" />
            </Col>
            <Col className="gutter-row, col-flex" span={7}>
                <MyInput placeholder="请输入1-24之间的数,保留两位小数" inputWidth={inputWidth} suffix="%"/>
            </Col>
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="还款方式" important="*" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MySelect defaultValue="一次性还款" List={twoList} inputWidth={inputWidth} />
            </Col>
        </Row>
    )
}

const ThisFour = (props) => {
    const FourList = ["月", "天"]
    return (
        <Row gutter={0} className="row">
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="期限类型" important="*" />
            </Col>
            <Col className="gutter-row, lineheight" span={7}>
                <MyRadio List={FourList}/>
            </Col>
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="借款期限" important="*" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MyInput placeholder="请输入0-999的整数" inputWidth={inputWidth} suffix="月"/>
            </Col>
        </Row>
    )
}
const ThisFive = (props) => {
    const FiveList = ["成立计息"]
    return (
        <Row gutter={0} className="row">
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="借款起息方式" important="*" />
            </Col>
            <Col className="gutter-row, lineheight" span={7}>
                <MyRadio List={FiveList}/>
            </Col>
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="借款管理费月率" important="*" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MyInput placeholder="请输入0-24之间的数, 保留两位小数" inputWidth={inputWidth} suffix="%"/>
            </Col>
        </Row>
    )
}
const ThisSix = (props) => {
    const SixList = ['新增', '短期', '中期', '长期']
    return (
        <Row gutter={0} className="row">
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="逾期罚款利息" important="*" />
            </Col>
            <Col className="gutter-row, lineheight" span={7}>
                <MyInput placeholder="请输入0-24之间的数, 保留两位小数" inputWidth={inputWidth} suffix="%"/>
            </Col>
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="借款类型" important="*" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MySelect defaultValue="新增" List={SixList} inputWidth={inputWidth} />
            </Col>
        </Row>
    )
}
const ThisSeven = (props) => {
    const SevenList = ['购物', '消费', '学习', '活动']
    return (
        <Row gutter={0} className="row">
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="资金用途" />
            </Col>
            <Col className="gutter-row, lineheight" span={7}>
                <MySelect defaultValue="请选择" List={SevenList} inputWidth={inputWidth} />
            </Col>
            <Col className="gutter-row, text-right" span={4}>
                <TextTitle title="还款来源" />
            </Col>
            <Col className="gutter-row" span={7}>
                <MyInput placeholder="请输入借款人还款来源" inputWidth={inputWidth} />
            </Col>
        </Row>
    )
}